<template>
  <el-popover  v-model="visible" placement="bottom" trigger="click">
    <div class="app-more-search">
      <ul v-for="item in typeList" :key="item.id">
        <li>{{ item.label }}</li>
        <li
          v-for="child in item.list"
          :key="child.id"
          :class="[otherParams[item.key] === child.value ? 'active' : '']"
          @click="selectItem(item, child)"
        >
          {{ child.name }}
        </li>
      </ul>
      <ul>
        <li>创建时间</li>
        <li>
          <el-date-picker
            v-model="date"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
            @change="changeDateHandler"
          />
        </li>
      </ul>
      <div class="app-more-search-btn-view">
        <span>
          <el-button
            type="primary"
            size="mini"
            @click="confirm"
          >查询</el-button>
          <el-button type="default" size="mini" @click="cancel">取消</el-button>
        </span>
      </div>
    </div>
    <el-button
      :size="size"
      slot="reference"
      type="primary"
      icon="el-icon-search"
    >更多搜索</el-button>
  </el-popover>
</template>

<script>
export default {
  name: 'MoreSearch',
  props: {
    value: {
      type: Object,
      default() {
        return {}
      }
    },
    size:{
      type:String,
      default:'middle'
    }
  },
  data() {
    return {
      typeList: [
        {
          id: 1,
          key: 'is_disable',
          label: '商品状态',
          list: [
            {
              id: 'diabled_1',
              name: '全部',
              value: ''
            },
            {
              id: 'diabled_2',
              name: '禁用',
              value: 2
            },
            {
              id: 'diabled_3',
              name: '启用',
              value: 1
            }
          ]
        },
        {
          id: 2,
          key: 'status',
          label: '商品审核状态',
          list: [
            {
              id: 'status_1',
              name: '全部',
              value: ''
            },
            {
              id: 'status_2',
              name: '待编辑',
              value: 3
            },
            {
              id: 'status_3',
              name: '待提交',
              value: 4
            },
            {
              id: 'status_4',
              name: '待审核',
              value: 0
            },
            {
              id: 'status_5',
              name: '审核通过',
              value: 1
            },
            {
              id: 'status_6',
              name: '审核驳回',
              value: 2
            }
          ]
        },
        {
          id: 3,
          key: 'packing_method',
          label: '包装方式',
          list: [
            {
              id: 'packing_method_1',
              name: '全部',
              value: ''
            },
            {
              id: 'packing_method_2',
              name: '普通',
              value: 1
            },
            {
              id: 'packing_method_3',
              name: '多箱包装',
              value: 2
            }
          ]
        },
        {
          id: 4,
          key: 'operate_type',
          label: '运营类型',
          list: [
            {
              id: 'operate_type_1',
              name: '全部',
              value: ''
            },
            {
              id: 'operate_type_2',
              name: '代营',
              value: 1
            },
            {
              id: 'operate_type_3',
              name: '自营',
              value: 2
            }
          ]
        }
      ],
      visible: false,
      otherParams: {
        is_disable: '', // 禁启用
        status: '', // 审核装填
        start_at: '', // 开始时间
        packing_method: '',
        operate_type: '',
        end_at: '' // 结束时间
      },
      date: []
    }
  },
  watch: {
    value(newVal) {
      const vm = this
      for (const key in vm.otherParams) {
        const currentValue = vm.otherParams[key]
        const newValue = newVal[key]
        if (currentValue !== newValue) {
          if (key === 'start_at' && newValue === '') vm.date = []
          vm.otherParams[key] = newValue
        }
      }
    }
  },
  methods: {
    // 选择
    selectItem(item, child) {
      const vm = this
      vm.otherParams[item.key] = child.value
    },
    // 修改时间处理函数
    changeDateHandler(e) {
      console.log(e)
      const vm = this
      let start_at, end_at
      if (e?.length === 2) {
        const [start, end] = e
        start_at =start
        end_at = end
      } else {
        start_at = ''
        end_at = ''
      }
      vm.otherParams.start_at = start_at
      vm.otherParams.end_at = end_at
    },
    // 确定
    confirm() {
      const vm = this
      const otherParams = Object.assign({}, vm.value)
      for (const key in vm.otherParams) {
        otherParams[key] = vm.otherParams[key]
      }
      vm.$emit('input', otherParams)
      vm.$emit('search')
      vm.visible = false
    },
    // 取消
    cancel() {
      const vm = this
      vm.otherParams.is_disable = '' // 禁启用
      vm.otherParams.status = '' // 审核装填
      vm.otherParams.start_at = '' // 开始时间
      vm.otherParams.packing_method = ''
      vm.otherParams.operate_type = ''
      vm.otherParams.end_at = '' // 结束时间
      vm.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.app-more-search {
  ul {
    list-style: none;
    color: #333;
    font-size: 14px;
    padding: 0;
    margin: 0;
    margin-top: 20px;
    li {
      display: inline-block;
      padding: 2px 10px;
      margin: 0 10px;
      cursor: pointer;
    }
    li:first-of-type {
      width: 105px;
      text-align: right;
    }
    li.active {
      background-color: #7ca4d2;
      color: #fff;
    }
  }
  &-btn-view {
    text-align: center;
    margin-top: 20px;
  }
}
</style>
